<template>
    <div class="main">
        <div class="top-nav">
            <router-link :to="'/Seach/Vocalist'">歌手</router-link>
            <router-link :to="'/Seach/SongList'">歌单</router-link>
            <router-link :to="'/Seach/SeachList'">搜索</router-link>
        </div>
    <router-view @getid="getId"></router-view>
    </div>
</template>

<script>
export default {
    methods : {
        getId(obj){
            this.$emit('getid',obj)
        }
    }
}
</script>

<style lang="scss" scoped>
    .main {
        width: 100%;
    }
   .top-nav {
       width: 100%;
       display: flex;
        margin: 1rem 0rem;

       >a {
           display: block;
           text-align: center;
           margin: 1.7rem 0rem 0rem 0rem;
           height: 3rem;
           line-height: 3rem;
           background: rgba(180, 180, 180, 0.1);
           flex: 1;
           color: #000;
           text-decoration: none;
       }

       .active {
           color: #33CCBB;
           font-size: 1rem;
       }
   }
</style>